{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-download-single">
            <div class="el-site">
                <div class="catalog">
                    <a class="title item">当前分类</a>
                    {volist name=":catalog_child($catalog.id)" id="item"}
                    <a class="item" href="{$item.url}">{$item.title}</a>
                    {/volist}
                </div>
                <div class="recommend">
                    <a class="title item">推荐工作</a>
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            {volist name=":down(['isrecommend'])" id="item"}
                            <div class="swiper-slide">
                                <a href="{$item.url}" target="_blank">
                                    <img src="{$item.cover}">
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
            <div class="el-mian">
                <div class="el-download-title">
                    <div class="item">{$single.title}</div>
                    <div class="item downloaded">
                        <el-button type="success" size="small" icon="el-icon-star-off" @click="downloaded()">下载</el-button>
                    </div>
                </div>
                <div class="el-download-content">{$single.content|raw}</div>
                <div class="el-next-prev">
                    <div class="item prev">
                        上一页：{empty name="single.prev"}没有了{else/}<a href="{$single.prev.url}">{$single.prev.title}</a>{/empty}
                    </div>
                    <div class="item next">
                        下一页：{empty name="single.next"}没有了{else/}<a href="{$single.next.url}">{$single.next.title}</a>{/empty}
                    </div>
                </div>  
             </div>
         </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                single: {:json_encode($single)},
            }
        },
        mounted() {
            new Swiper(".recommend .swiper", {
                direction:'vertical',
                slidesPerView: 6,
                spaceBetween: 10,
            });
        },
        methods: {
            downloaded() {
                post('api/cms/download/downloaded', {id: this.single.id}, function (res) {
                    if (res.status === 'success') {
                        window.open(res.data);
                    }
                })
            },
        }
    })
</script>
{include file="common/footer"}